<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts</title>
    <script src="../js/echarts.js"></script>
    <!--   将vue 的参数导入 图形报表  ： 先添加vue 的js 样式     先加载 vue-->
    <script src="../js/vue.js"></script>
    <!-- 添加了  axios Js 的样式之后才能在vue里面发送 axios 的请求   -->
    <script src="../js/axios-0.18.0.js"></script>

</head>
<body>
<!--   既然要导入 vue  那么vue 所有的样式 必须要再  <div id="app">   </div>  中-->
<div id="app">
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
</div>

<!--  然后在 <script>  </script> 标签中写Js 代码  -->

<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{},
        /* create： 创建的意思   钩子函数 */
        create(){
            /*  因为 这里要发送 axios 请求  所以 在  <head> </head> 标签中 要添加 axios-0.18.0.js 样式 */
            axios.get("/xxx.do").then((res)=>{

                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));
                    //获取图形中的动态数据   将后端的数据 变成数组
                var option = {
                    title: {
                        text: 'ECharts 入门示例'
                    },
                    tooltip: {},
                    legend: {
                        data:['销量']
                    },
         // 获取图形中的动态数据     map.put("pname",[羊毛衫，衬衫])  map.put("psales",[5,20,30])
                    xAxis: {
                        // 获取图形中的动态数据
                        data:res.data.data.pname
                        /*data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]*/
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'bar',                  /*  bar : 图形样式 */
                        // 获取图形中的动态数据
                        data:res.data.data.psales
                       /* data: [5, 20, 36, 10, 10, 20]*/
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            })
        }
    })
</script>
</body>
</html>